<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
    import BScroll from 'better-scroll'

    export default {
        name: "Scroll",
        props: {
            probeType: {
                type: Number,
                default: 1
            },
            data: {
                type: Array,
                default: () => {
                    return []
                }
            },
            pullUpLoad: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                scroll: null,
                message: '哈哈哈'
            }
        },
        mounted() {
            setTimeout(this.__initScroll, 20)
        },
        methods: {

            // TODO: 初始化BScroll对象
            __initScroll() {
                if (!this.$refs.wrapper)
                    return;

                this.scroll = new BScroll(
                    this.$refs.wrapper,
                    {
                        click: true,
                        probeType: this.probeType,
                        pullUpLoad: this.pullUpLoad
                    }
                );

                // 2.监听滚动的位置
                this.scroll.on('scroll', (position) => {
                    // console.log(position);
                    // console.log("滚动中");
                    this.$emit('scroll', position)
                });

                // 3.监听上拉事件
                this.scroll.on('pullingUp', () => {
                    console.log("上拉中");
                    this.$emit('pullingUp')
                })

            },

            // TODO: 更新全部数据
            refresh() {
                this.scroll && this.scroll.refresh && this.scroll.refresh()
            },

            // TODO: 结束下拉动作，加载新数据
            finishPullUp() {
                this.scroll && this.scroll.finishPullUp && this.scroll.finishPullUp()
            },

            // TODO: 滑动到...
            scrollTo(x, y, time = 300) {
                this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time)
            }
        },
        watch: {
            data() {
                setTimeout(this.refresh, 20)
            }
        }
    }

</script>

<style scoped>

</style>
